<%@page import="kr.co.infovil.user.entity.UserDTO"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<%@ page language="java" contentType="text/html;  charset=utf-8"
	pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>일정관리</title>
<link href="/resources/css/jquery-ui.css" rel="stylesheet">
<link href="/resources/fullcalendar/fullcalendar.css" rel="stylesheet" />
<link href="/resources/fullcalendar/fullcalendar.print.css" rel="stylesheet" media="print" />
<script src="/resources/lib/jquery.min.js"></script>
<script src="/resources/lib/jquery-ui.js"></script>
<script src='/resources/fullcalendar/fullcalendar.js'></script>
<script src='/resources/fullcalendar/gcal.js'></script>
<script type="text/javascript" src="http://apis.daum.net/maps/maps3.js?apikey=fbf95ac40e0f230c6e8a4e4babce304a457f33a2"></script>
<style type="text/css">
	html, body {
    	font-family: "Nanum Gothic", sans-serif;
    	width:100%;
    	height:100%;
    	font-size: 13px;
    	margin:0;
    	padding:0;
    	text-align:center;
	}
	#groupList {
		width:100px;
		margin:0;
		vertical-align:top;
		padding-top:70px;
		text-align:left;
	}
	#calendar {
		font-size: 14px;
		font-family: "Nanum Gothic", sans-serif;
		width: 900px;
		margin: 0 auto;
	}
	#dialog-form{
		margin-top: 20px;
		text-align:left;		
		}
	#loading {
		text-align: center;
		padding-top: 370px;
		}
	#setTitle{
		border:0px;
	}
	#footwarp{
		width:100%;
		height:50px;
		padding-top:20px;
		margin:-70px auto 0 auto;
	}
	#footer{
		text-align:center;
		margin:0 auto;
	}
	.groupListOver{
		background-color:#F2F2F2;
	}
	.groupBoxDisable{
		background-color: white;
		border: 1px solid;
		border-color: #EFEFEF;
	}
}
</style>
<script type="text/javascript">

//그룹리스트 마우스 오버 이벤트
function groupListOver(id){
	$("#"+id).addClass("groupListOver");
}
function groupListOut(id){
	$("#"+id).removeClass("groupListOver");
}

//지도열기
function loadMap(latlng, place){
	
	var data = latlng.split("/");
	var lat = data[0];
	var lng = data[1];
	window.open("/calendar/viewMap.do?lat="+lat+"&lng="+lng+"&place="+place,"","width=800, height=500, history=no, resizable=no, status=no, toolbar=no, menubar=no,");
}
//회원번호 저장할 변수
var member_no = '${sessionScope.userDto.num}';

//그룹 스케줄 배열 생성	
<c:forEach var="map" items="${groupScheduleListMap}" varStatus="status">
	eval("${map.key}"+"="+"[]"); //동적 배열 생성
	<c:forEach var="list" items="${map.value}">
		eval("${map.key}.push({id:'${list.id}',title:'${list.title}',start:'${list.startTime}',end:'${list.endTime}',allDay:${list.allDay},color:'${groupList[fn:substring(map.key,10,fn:length(map.key))-1].color}',group_no:'${list.group_no}'})");
	</c:forEach>
</c:forEach>

	$(document).ready(function() {
		
		// 맵 다이어로그 생성
		$("#viewMap").dialog({
	        autoOpen: false,
	        height: 500,
	        width: 800,
	        modal: true,
	        show: {effect:"fadeIn", duration:400}
		});
		
		// 일정보기 다이어로그 생성
		$("#dialog-info").dialog({
	        autoOpen: false,
	        modal: true,
	        height: 220,
	        width: 400,
	        show: {effect:"fadeIn", duration:400},
	        close: function(){
	        	$('#updateTitle').show();
	        	$("#setTitle").unbind('click');
	        	$("#dialog-info").unbind();
	        }
		});
		
		// 그룹리스트 생성
		<c:forEach var="grouplist" items="${groupList}" varStatus="status">
			var groupColor = '${grouplist.color}';
			var groupName = '${grouplist.name}';
			
			$("#groupList").append("<div id="+'${grouplist.id}'+" onmouseover='this.style.background=\"#D3D3D3\"' onmouseout='this.style.background=\"#FFFFFF\"' style='cursor:pointer;margin-bottom:6px;'><div id='groupBox"+'${grouplist.id}'+"' style='width:18px;height:18px;background-color:"+groupColor+"; display:inline-block; vertical-align:top;'></div><span>  "+groupName+"</span><br></div>");
			$("#"+'${grouplist.id}').bind('click',{groupColor:groupColor},function(event){
				if(!$(this).data("clickStatus")){
					var groupBoxDisable = {
						'width':'18px',
						'height':'18px',
						'background-color':'white',
						'border':'1px solid',
						'border-color':'#B6B6B6',
					};
					$("#groupBox"+$(this).attr("id")).css(groupBoxDisable);
					$(this).data("clickStatus",1);
					calendar.fullCalendar('removeEventSource', eval("groupArray"+'${grouplist.id}'));
				}else{
					var groupBoxEnable = {
							'width':'18px',
							'height':'18px',
							'border':'0',
							'background-color':event.data.groupColor,
						};
						$("#groupBox"+$(this).attr("id")).css(groupBoxEnable);
					$(this).data("clickStatus",0);
					calendar.fullCalendar('addEventSource', eval("groupArray"+'${grouplist.id}'));
					
				}
			});
		</c:forEach>
		
		var editable = true;
		if(member_no == "") editable = false;
		
		var calendar = $('#calendar').fullCalendar({
			eventSources: [
				{
					url: 'https://www.google.com/calendar/feeds/ko.south_korea%23holiday%40group.v.calendar.google.com/public/basic',
					color: '#FFFFFF',
					textColor: '#FF7070',
					description: 'This is a cool event'
			    },
					<c:forEach var="groupArrayMap" items="${groupScheduleListMap}" varStatus="status">
						<c:out value="${groupArrayMap.key}"/>,
			    	</c:forEach>   
			],
			header: {
				left: 'prev,next today',
				center: 'title',
				right: 'month,agendaWeek,agendaDay'
			},
			selectable: editable,
			selectHelper: editable,
			editable: editable,
			/////////////////////////////// 일정 추가 이벤트 ///////////////////////////////////////////
			select: function(start, end, allDay, event) {
				if(member_no == "") return false;
				$("#title").val("");
				
	      		//DB에 저장할 날짜형식 지정
				var dbStartTime = $.fullCalendar.formatDate(start, 'yyyy-MM-dd-HH-mm');
				var dbEndTime = $.fullCalendar.formatDate(end, 'yyyy-MM-dd-HH-mm');
				
			    $("#dialog-form").dialog({
			        autoOpen: true,
			        height: 250,
			        width: 400,
			        show: {effect:"fadeIn", duration:400},
			        modal: true,
			        close: function(){
			        	$("#schedule_form").unbind();
			        },
			        buttons: {
			          "일정 만들기": function() {
			        	  $("#startTime").val(dbStartTime);
			        	  $("#endTime").val(dbEndTime);
			        	  $("#allDay").val(allDay);
			        	  if($("#title").val()==""){
			        		  alert('제목입력은 필수입니다.');
			        		  return false;
			        	  }
			        	  // DB 처리
			        	  $.ajax({
			        		  type : "POST"
			        		  , async : true
			        		  , data : $("#schedule_form").serialize()
			        		  , url : "/calendar/createSchedule.do"
			        		  , dataType : "html"
			        		  , timeout : 30000 //제한시간 지정
			        		  , cache : false  //true, false
			        		  , error : function(request) {
			        			  //통신 에러 발생시 처리
			        			  alert("일정추가가 정상적으로 되지 않았습니다. 잠시 후 다시 이용해 주세요.");
			        			  }
			        		  , success : function(response) {
			        			  calendar.fullCalendar('renderEvent',{
			        				  id: response,
			        				  title: $("#title").val(),
			        				  start: start,
			        				  end: end,
			        				  allDay: allDay,
			        				  color: "${groupDto.color}",
			        				  group_no: member_no
			        				  },
			        				  true // make the event "stick"
			        				  );
			        			}
			        		});
			        	  calendar.fullCalendar('unselect');
	        			  $(this).dialog( "close" );
			          },
			        	"일정 수정": function(){
			        		alert('수정');
			        	}
			        }//end button
			    });
			 	// enter event
				$('#schedule_form').keydown(function(e) {
				    if (e.keyCode == 13){
				    	if($("#title").val()==""){
			        		  alert('제목입력은 필수입니다.');
			        		  return false;
				    	}else{
				    		$(this).parent().parent().find('.ui-dialog-buttonpane').find('button:first').click();
				    	}
				    }
				});
			    var week = new Array("일","월","화","수","목","금","토");
			    
			    // 다이어로그에 보여줄 시간형식 지정.
			    var startDay = $.fullCalendar.formatDate(start, 'MM월 d일 ');
			    var endDay = $.fullCalendar.formatDate(end, 'MM월 d일 ');
			    var startWeek = "("+week[start.getDay()]+")";
			    var endWeek = "("+week[end.getDay()]+")";
			    
			    if(allDay == true){
				    if(startDay==endDay){
				    	$('#setTime').html(startDay+startWeek);
				    }else{
				    	$('#setTime').html(startDay+startWeek+" - "+ endDay+endWeek);
				    }
			    }else{
			    	var startTime = $.fullCalendar.formatDate(start, 'MM월 d일 tt h:mm');
			    	var endTime = $.fullCalendar.formatDate(end, 'tt h:mm');
			    	$('#setTime').html(startTime+" - "+endTime);
			    }
			    
				calendar.fullCalendar('unselect');
			},
			/////////////////////////////// 일정 클릭 이벤트 ///////////////////////////////////////////
			eventClick: function(calEvent, jsEvent, view) {
				if(calEvent.url) return false;
				var group_no = calEvent.group_no;
				$("#id").val(calEvent.id);
				
				// 클릭한 이벤트의 내용, 장소, 이미지, 문서 가져오기
				$("#setPlace").html("");
				$.ajax({
				    type : "get"
				    , url : "/calendar/getSchedule.do?id="+calEvent.id
				    , dataType : "json"
				    , error : function(request) {
				     	alert("일정 정보를 가져올 수 없습니다.");
				    }
				    , success : function(data) {
				    	if(data.place != null){
					    	if(data.latlng == null){
					    		$("#setPlace").html(data.place);
					    	}else{
					    		$("#setPlace").html(data.place+"&nbsp;<button id='loadMap' class='btn btn-default btn-xs' tabindex='-1'><span class='fa fa-map-marker'></span> 지도보기</button>");
					    		
					    		$("#loadMap").click(function(){
					    			
					    			loadMap(data.latlng,data.place);
					    		});
					    	}
				    	}
				    }
				});
				
				// 다이어로그 호출
				$("#dialog-info").dialog("open");
				
				
				
				// 다이어로그에 보여줄 시간형식 지정.
				var week = new Array("일","월","화","수","목","금","토");
			    var startDay = $.fullCalendar.formatDate(calEvent.start, 'M월 d일 ');
			    var startWeek = "("+week[calEvent.start.getDay()]+")";
			    if(calEvent.end == null){
			    	$('#setTime2').html(startDay+startWeek);
			    }else{
			    	var endDay = $.fullCalendar.formatDate(calEvent.end, 'M월 d일 ');
			    	var endWeek = "("+week[calEvent.end.getDay()]+")";
			    	$('#setTime2').html(startDay+startWeek+" - "+ endDay+endWeek);
			    	if(calEvent.allDay == false){
			    		var startTime = $.fullCalendar.formatDate(calEvent.start, 'M월 d일 tt h:mm');
				    	var endTime = $.fullCalendar.formatDate(calEvent.end, 'tt h:mm');
				    	$('#setTime2').html(startTime+" - "+endTime);
			    	}
			    }
			    $('#updateTitle').hide();
			    
				// 다이어로그에 보여줄 타이틀 지정
				$('#setTitle').show();
				$('#setTitle').html(calEvent.title);
				
				// 타이틀 hover 이벤트
				if(member_no == "" || member_no != calEvent.group_no){
					$("#setTitle").removeAttr("onmouseover","this.style.background='#FFFFFF'");
				}else{
					$("#setTitle").attr("onmouseover","this.style.background='#FFFFC0'");
				}
				
				
				// 일반사용자 및 그룹관리자의 권한에 따라 버튼 생성
				if(member_no == "" || member_no != calEvent.group_no){
					$("#dialog-info").dialog({ buttons: {}});
				}else{
					$("#dialog-info").dialog({
					buttons: {
			        	"일정 삭제": function() {
			        		$.ajax({
			        			type : "POST"
							    , async : true
							    , url : "/calendar/removeSchedule.do?id="+calEvent.id
							    , dataType : "html"
							    , timeout : 30000 //제한시간 지정
							    , cache : false  //true, false
							    , error : function(request) {
							     //통신 에러 발생시 처리
							     alert("삭제가 정상적으로 되지 않았습니다. 잠시 후 다시 이용해 주세요.");
							    }
							    , success : function(response) {
							    	calendar.fullCalendar('removeEvents', calEvent.id);
							    	$("#dialog-info").dialog("close");
							    	alert('삭제되었습니다');
							    }
							});
				        },
				        "일정 수정": function(){
				        	$('#detail').submit();
				    	}
		       		}
					});
				}
				$("#setTitle").one('click', function(){
					if(member_no == "" || member_no != calEvent.group_no){
						return false;
					}else{
						$('#setTitle').hide();
						$('#updateTitle').show();
						$('#updateTitle').val(calEvent.title);
							
						$("#dialog-info").dialog("option","buttons", [{
								text: "저장",
								click: function(){
									calEvent.title = $('#updateTitle').val();
									$.ajax({
									    type : "POST"
									    , url : "/calendar/updateTitle.do?id="+calEvent.id+"&title="+calEvent.title
									    , dataType : "html"
									    , timeout : 30000 //제한시간 지정
									    , error : function(request) {
									    	//통신 에러 발생시 처리
									     	alert("변경에 실패했습니다. 잠시 후 다시 이용해 주세요.");
									     	$("#dialog-info").dialog("close");
									    }
									    , success : function(response) {
									    	alert('변경이 완료되었습니다');
									    	calendar.fullCalendar('updateEvent', calEvent);
									    	$("#dialog-info").dialog("close");
									    }
									});
								}
							},
							{
								text: "취소",
								click: function(){
									$("#dialog-info").dialog("close");
								}
							}
						]);
						
						// 엔터키 이벤트 처리
						$('#dialog-info').keydown(function(e) {
						    if (e.keyCode == 13){
						    	e.preventDefault();
						    	$(this).parent().parent().find('.ui-dialog-buttonpane').find('button:first').click();
						    }
						});
					}
				});
			},
			/////////////////////////////// 리사이즈 이벤트 ///////////////////////////////////////////
			eventResize : function( event, dayDelta, minuteDelta, revertFunc, jsEvent, ui, view ) {
				if(member_no != event.group_no){
					alert('해당 스케줄을 수정할 권한이 없습니다');
					revertFunc();
					return false;
				}
				var start = event.start.getFullYear()+"-"+(event.start.getMonth()+1)+"-"+event.start.getDate()+
				" "+event.start.getHours()+":"+event.start.getMinutes();
				var end;
				if(event.end == null){
					end = start;
				}else{
					end = event.end.getFullYear()+"-"+(event.end.getMonth()+1)+"-"+event.end.getDate()+
					" "+event.end.getHours()+":"+event.end.getMinutes();
				}
				
				$.ajax({
				    type : "POST"
				    , async : true
				    , url : "/calendar/resizeSchedule.do?start="+start+"&end="+end+"&id="+event.id
				    , dataType : "html"
				    , timeout : 30000 //제한시간 지정
				    , cache : false  //true, false
				    , error : function(request) {
				    	//통신 에러 발생시 처리
				     	alert("변경에 실패했습니다. 잠시 후 다시 이용해 주세요.");
				     	revertFunc();
				    }
				    , success : function(response) {
				    	alert('변경이 완료되었습니다');
				    }
				});
			},
			/////////////////////////////// 드롭 이벤트 ///////////////////////////////////////////
			eventDrop: function(event, dayDelta, minuteDelta, allDay, revertFunc, jsEvent, ui, view) {
				if(member_no != event.group_no){
					alert('해당 스케줄을 수정할 권한이 없습니다');
					revertFunc();
					return false;
				}
				$.ajax({
				    type : "POST"
				    , async : true
				    , url : "/calendar/dropSchedule.do?dayDelta="+dayDelta+"&minuteDelta="+minuteDelta+"&id="+event.id+"&allDay="+allDay
				    , dataType : "html"
				    , timeout : 30000 //제한시간 지정
				    , cache : false  //true, false
				    , error : function(request) {
					    //통신 에러 발생시 처리
					    alert("변경에 실패했습니다. 잠시 후 다시 이용해 주세요.");
					    revertFunc();
				    }
				    , success : function(response) {
				    	alert('변경이 완료되었습니다');
				    }
				});
			},
			/////////////////////////////// 로딩 이미지 ///////////////////////////////////////////
			loading: function(bool) {
				if (bool) {
					$('#loading').show();
					// 로딩이미지의 위치 및 크기조절 
					$('#loading').css('position', 'absolute');
					$('#loading').css('left', $('#calendar').offset().left);
					$('#loading').css('top', $('#calendar').offset().top);
					$('#loading').css('width', $('#calendar').css('width'));
					
					//$(this).fadeIn(500);
				}else{
					$('#loading').hide();
				}
			}
		});
		
	});//end jQuery Load

</script>
</head>
<body>
<c:forEach var="map" items="${groupScheduleListMap}">
		<c:if test="${map.key == 'group0'}">
			<c:forEach var="list" items="${map.value}">
				<c:out value="${list.title}"></c:out>
			</c:forEach>
		</c:if>
</c:forEach>
<form id="detail" action="/calendar/detailSchedule.do" method="post">
	<input type="hidden" value="" id="id" name="id">
</form>

<!-- 헤더 -->
<%@include file="common/header.jsp" %>
<!-- 콘텐츠 -->
<div id="content">
	<div id="groupList" style="display:inline-block;"></div>
	<div id="calendar" style="display:inline-block; z-index:-100;" ></div>
</div>

<!-- 일정추가 다이어로그 -->
<div id="dialog-form" style="display:none;position:relative;" title="일정추가">
	<form id="schedule_form" name="schedule_form" class="form-inline">
		<input type="hidden" value="" id="startTime" name="startTime">
		<input type="hidden" value="" id="endTime" name="endTime">
		<input type="hidden" value="" id="allDay" name="allDay">
		<input type="hidden" value="${groupDto.id}" id="group_no" name="group_no">
		<span><b>시간</b> : <span id="setTime"></span></span><br>
		<div class="form-group" style="margin-top:10px;">
			<label class="sr-only" for="title" >제목</label>
			<b>제목</b> : <input type="text" name="title" id="title" class="form-control" style="width:280px;height:30px;">
		</div>
	</form>
</div>
<!-- 일정추가 다이어로그  -->

<!-- 로딩  -->
<div id="loading" style="display:none;position:relative;"><img src="/resources/img/viewLoading.gif"></div>
<!-- 로딩  -->

<!-- 일정보기 다이어로그  -->
<div id="dialog-info" style="display:none;text-align:left;">
	<p id="setTitle" style="width:100%;cursor:text;font-weight:bold;font-size:1.1em;" onmouseover="this.style.background='#FFFFC0'" onmouseout="this.style.background='#FFFFFF'"></p>
	<input id="updateTitle" type="text" style="width:100%;margin-bottom:10px;" class="form-control">
	<p id="setTime2"></p>
	<p id="setContent"></p>
	<p id="setPlace"></p>
</div>
<!-- 일정보기 다이어로그  -->

<div id="footwrap">
	<div id="footer">
		 인포빌 캘린더.
	</div>
</div>
</body>
</html>